<template>
  <myTree
    :treeList="treeList"
    @handleNodeExpand="handleNodeExpand"
    @handleNodeClick="handleNodeClick"
  ></myTree>
</template>
<script>
import myTree from "@/components/tree.vue";
import { reactive, ref } from "@vue/reactivity";
export default {
  setup() {
    const treeList = reactive([
      {
        mid: "1",
        label: "qqq",
        children: [
          {
            mid: "2",
            label: "aaaa",
          },
        ],
      },
      {
        mid: "3",
        label: "wwww",
        children: [
          {
            mid: "4",
            label: "bbb",
          },
        ],
      },
    ]);

    // 定义展示的属性，treeList中是subs和mName,
    const defaultProps = reactive({
      children: "subs",
      label: "mName",
    });

    // 树的唯一标志，mid,也是treeList的每一条数据的唯一标志
    const nodeKey = ref("mid");

    const handleNodeExpand = (item) => {
      console.log("展开了", item);
    };

    const handleNodeClick = (item) => {
      console.log("点击了", item);
    };

    return {
      treeList,
      defaultProps,
      nodeKey,
      handleNodeExpand,
      handleNodeClick,
    };
  },
  components: {
    myTree,
  },
};
</script>